<template>
  <div class="all">
    <div class="show" @click="changelike">
      <img :src="img" />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      img: require("@/assets/dislike.png"),
    };
  },
  props: ["avid", "userid"],
  mounted() {
    console.log("创建");
    var that = this;
    this.axios
      .get("http://120.78.199.38:9000/judgeActivity", {
        params: {
          avid: that.avid,
          userid: that.$store.state.yb_userid,
        },
      })
      .then((res) => {
        // console.log(res);
        if (res.data == true) {
          that.img = require("@/assets/like.png");
        }
      });
  },
  methods: {
    changelike() {
      var that = this;
      if (this.img == require("@/assets/dislike.png")) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        //关注
        this.axios
          .get("http://120.78.199.38:9000/loveActivity", {
            params: {
              avid: that.avid,
              userid: that.$store.state.yb_userid,
            },
          })
          .then((res) => {
            loading.close();
            this.$message({
              message: "关注成功",
              type: "success",
            });
            this.img = require("@/assets/like.png");
            // console.log(res.data);
          });
      } else {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        //取关
        this.axios
          .get("http://120.78.199.38:9000/deleteActivity", {
            params: {
              avid: that.avid,
              userid: that.$store.state.yb_userid,
            },
          })
          .then((res) => {
            this.img = require("@/assets/dislike.png");
            loading.close();
            // console.log(res.data);
          });
      }
    },
  },
};
</script>
<style scoped>
.all {
  height: 100%;
  width: 10%;
}
img {
  height: 25px;
  width: 25px;
}
.show {
  height: 55px;
  width: 100%;
  position: relative;
  top: 85%;
}

</style>
